<template>
  <div class="Singapore flex flex-col justify-start items-center text-white">
    <h3 class="mt-8 text-base font-bold">{{ $t("home.Singapore") }}</h3>
    <p class="mt-4 text-sm">{{ $t("home.SingaporeTip") }}</p>
    <div class="first">London office</div>
    <div class="two">Dubai office</div>
    <div class="three">Sydney office</div>
    <div class="four">Singapore office</div>
    <div class="five">Jakarta office</div>
    <div class="six">Beijing office</div>
    <div class="seven">New York office</div>
  </div>
</template>
<script setup></script>
<style scoped lang="scss">
.Singapore {
  width: 100%;
  height: 900px;
  background: url("@/assets/images/aboutAce/HeadquarteredSingapore.png")
    no-repeat;
  background-size: cover;
  background-position: center; /* 确保图片在元素中心 */
  position: relative;
  .first,
  .two,
  .three,
  .five,
  .six,
  .seven {
    width: 140px;
    height: 40px;
    position: absolute;
    background: #0572c0;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
  }
  .four {
    width: 140px;
    height: 40px;
    position: absolute;
    background: #ffc700;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
  }

  @media screen and (min-width: 1440px) {
    /* 在大屏幕上应用的样式 */
    .first {
      top: 40%;
      left: 42%;
      font-size: 18x;
      color: #fff;
    }

    .two {
      top: 61%;
      left: 54%;
    }

    .three {
      top: 83%;
      right: 21%;
    }

    .five {
      top: 72%;
      right: 24%;
    }

    .six {
      top: 42%;
      right: 23%;
    }

    .seven {
      top: 50%;
      left: 28%;
    }

    .four {
      top: 66%;
      right: 24%;
    }
  }

  @media screen and (max-width: 1440px) {
    .first {
      top: 40%;
      left: 42%;
      font-size: 18x;
      color: #fff;
    }

    .two {
      top: 60%;
      left: 55%;
    }

    .three {
      top: 78%;
      right: 17%;
    }

    .five {
      top: 72%;
      right: 24%;
    }

    .six {
      top: 42%;
      right: 23%;
    }

    .seven {
      top: 50%;
      left: 28%;
    }

    .four {
      top: 66%;
      right: 24%;
    }
  }
}
</style>
